<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin:0px;
      padding:0px;
    }
    ul,li{
      list-style:none;
    }
    .all{
      position: relative;
      margin:0px auto;
      width: 90%;
    }
    .title_a{
      position: relative;
      border: 1px solid #cccccc;
      height: 40px;
    }
    .title_a li{
      float: left;
      width: 70px;
      height: 40px;
      text-align: center;
      line-height:40px;
    }
    .title_a li:hover{
      background-color: #bfc2c6;
      border-radius: 5px;
      cursor:default;
    }
    .title_b{
      border: 1px solid #cccccc;
      height: 40px;
      border-top: none;
    }
    .title_b li{
      float: left;
      height: 40px;
      text-align: center;
      line-height:40px;
    }
    .title_b li span:hover{
      background-color: #bfc2c6;
      border-radius: 5px;
      cursor:default;
    }
    .title_b li:nth-child(1){
      width: 100px;
      border-right: 1px solid #cccccc;
    }
    .title_b li:nth-child(1) span{
      float: left;
      width: 50px;
      height: 40px;
    }
    .title_b li:nth-child(2){
      padding: 0px 10px;
      width: 140px;
      border-right: 1px solid #cccccc;
      text-align: left;
    }
    .title_b li:nth-child(2) span{
      float: right;
      height: 40px;
    }
    .title_b li:nth-child(2):hover{
      background-color: #bfc2c6;
      border-radius: 5px;
      cursor:default;
    }
    .title_b li:nth-child(3){
      width: 100px;
      border-right: 1px solid #cccccc;
    }
    .title_b li:nth-child(3) span{
      float: left;
      width: 50px;
      height: 40px;
    }
    .title_b li:nth-child(4){
      width: 200px;
      border-right: 1px solid #cccccc;
    }
    .title_b li:nth-child(4) span{
      float: left;
      width: 50px;
      height: 40px;
    }
    .title_b li:nth-child(5){
      width: 100px;
      border-right: 1px solid #cccccc;
    }
    .title_b li:nth-child(5) span{
      float: left;
      width: 50px;
      height: 40px;
    }
    textarea{
      padding: 2%;
      width: 96%;
      height: 200px;
      font-size: 25px;
      border-top: none;
      border-color: #cccccc;
      outline: none;
      resize: vertical;
    }
    .title_a .a{
      display: none;
      position: absolute;
      left: 0px;
      top: 38px;
      width: 150px;
      border: 1px solid #cccccc;
    }
    .title_a .a li{
      width: 150px;
      height: 42px;
      background-color: #ffffff;
    }
    .title_a .b{
      display: none;
      position: absolute;
      left: 70px;
      top: 38px;
      width: 150px;
      border: 1px solid #cccccc;
    }
    .title_a .b li{
      float: none;
      width: 150px;
      height: 42px;
      background-color: #ffffff;
    }
    .title_a .c{
      display: none;
      position: absolute;
      left: 140px;
      top: 38px;
      width: 150px;
      border: 1px solid #cccccc;
    }
    .title_a .c li{
      float: none;
      width: 150px;
      height: 42px;
      background-color: #ffffff;
    }
    .title_a .d{
      display: none;
      position: absolute;
      left: 210px;
      top: 38px;
      width: 150px;
      border: 1px solid #cccccc;
    }
    .title_a .d li{
      float: none;
      width: 150px;
      height: 42px;
      background-color: #ffffff;
    }
    .e{
      display: none;
      position: absolute;
      left: 102px;
      top: 80px;
      width: 160px;
      border: 1px solid #cccccc;
    }
    .e li{
      padding: 0px 10px;
      float: none;
      width: 140px;
      height: 42px;
      line-height: 42px;
      text-align: left;
      background-color: #ffffff;
    }
    .e li span{
      float: right;
      line-height: 42px;
    }
  </style>
</head>
<body>
  <div class="all">
    <ul class="title_a">
      <li class="aa">文件</li>
      <ul class="a bb">
        <li>新文件</li>
      </ul>
      <li class="aa">编辑</li>
      <ul class="b bb">
        <li>撤销</li>
        <li>剪切</li>
        <li>复制</li>
        <li>粘贴</li>
      </ul>
      <li class="aa">查看</li>
      <ul class="c bb">
        <li>网格线</li>
      </ul>
      <li class="aa">格式</li>
      <ul class="d bb">
        <li>粗体</li>
        <li>斜体</li>
        <li>下划</li>
        <li>删线</li>
      </ul>
    </ul>
    <ul class="title_b">
      <li>
        <span>左</span>
        <span>右</span>
      </li>
      <li>段落<span>下</span></li>
      <li>
        <span>加粗</span>
        <span>斜体</span>
      </li>
      <li>
        <span>左齐</span>
        <span>居中</span>
        <span>右齐</span>
        <span>正齐</span>
      </li>
      <li>
        <span>左空</span>
        <span>右空</span>
      </li>
    </ul>
    <ul class="e">
      <li>标题<span>右</span></li>
      <li>文本<span>右</span></li>
      <li>基块<span>右</span></li>
      <li>对齐<span>右</span></li>
    </ul>
    <textarea></textarea>
  </div>
  <script>
    var title_a = document.querySelector('.title_a')
    var title_b = document.querySelector('.title_b')
    var textarea = document.querySelector('textarea')
    var top_li = title_a.querySelectorAll('.aa')
    var top_ul = title_a.querySelectorAll('ul')
    var md_li = title_b.querySelectorAll('li')
    var md_ul = document.querySelector('.e')
    var a=[20]
    for(var i=0;i<a.length;i++){
      a[i] = 1;
    }
    for(var i=0;i<top_li.length;i++)
    {
      top_li[i].setAttribute('index',i)
      top_li[i].onmousemove = function(){
        for(var i=0;i<top_ul.length;i++)
        {
          top_ul[i].style.display = 'none'
        }
        var index = this.getAttribute('index')
        top_ul[index].style.display = 'block'
      }
    }
    for(var i=0;i<top_li.length;i++)
    {
      top_li[i].onmouseout = function(){
        for(var i=0;i<top_ul.length;i++)
        {
          top_ul[i].onmousemove = function(){
            this.style.display = 'block'
            for(var i=0;i<this.children.length;i++)
            {
              this.children[i].onmousemove = function(){
                this.style.backgroundColor = '#cccccc'
              }
              this.children[i].onmouseout = function(){
                this.style.backgroundColor = '#ffffff'
              }
            }
          }
          top_ul[i].onmouseout = function(){
            this.style.display = 'none'
          }
        }
        for(var i=0;i<top_ul.length;i++)
        {
          top_ul[i].style.display = 'none'
        }
      }
    }
  top_ul[0].children[0].onclick =function(){
    textarea.value = ''
    textarea.focus()
  }
  top_ul[3].children[0].onclick =function(){
    if(a[0]==1)
    {
      textarea.style.fontWeight = 'bolder'
      textarea.focus()
      a[0]=0;
    }
    else
    {
      textarea.style.fontWeight = 'normal'
      textarea.focus()
      a[0]=1;
    }
  }
  top_ul[3].children[1].onclick =function(){
    if(a[1]==1)
    {
      textarea.style.fontStyle = 'italic'
      textarea.focus()
      a[1]=0;
    }
    else
    {
      textarea.style.fontStyle = 'normal'
      textarea.focus()
      a[1]=1;
    }
  }
  top_ul[3].children[2].onclick =function(){
    if(a[2]==1)
    {
      textarea.style.textDecoration = 'underline'
      textarea.focus()
      a[2]=0;
    }
    else
    {
      textarea.style.textDecoration = 'none'
      textarea.focus()
      a[2]=1;
    }
  }
  top_ul[3].children[3].onclick =function(){
    if(a[3]==1)
    {
      textarea.style.textDecoration = 'line-through'
      textarea.focus()
      a[3]=0;
    }
    else
    {
      textarea.style.textDecoration = 'none'
      textarea.focus()
      a[3]=1;
    }
  }
  md_li[1].onmousemove = function(){
    md_ul.style.display = 'block'
  }
  md_li[1].onmouseout = function(){
    md_ul.onmousemove = function(){
      this.style.display = 'block'
      for(var i=0;i<this.children.length;i++)
      {
        this.children[i].onmousemove = function(){
          this.style.backgroundColor =  '#cccccc'
        }
        this.children[i].onmouseout = function(){
          this.style.backgroundColor =  '#ffffff'
        }
      }
    }
    md_ul.onmouseout = function(){
      this.style.display = 'none'
    }
    md_ul.style.display = 'none'
  }
  md_li[2].children[0].onclick =function(){
    if(a[4]==1)
    {
      textarea.style.fontWeight = 'bolder'
      textarea.focus()
      a[4]=0;
    }
    else
    {
      textarea.style.fontWeight = 'normal'
      textarea.focus()
      a[4]=1;
    }
  }
  md_li[2].children[1].onclick =function(){
    if(a[5]==1)
    {
      textarea.style.fontStyle = 'italic'
      textarea.focus()
      a[5]=0;
    }
    else
    {
      textarea.style.fontStyle = 'normal'
      textarea.focus()
      a[5]=1;
    }
  }
  md_li[3].children[0].onclick = function(){ 
    textarea.style.textAlign = 'left'
    textarea.focus()
  }
  md_li[3].children[1].onclick = function(){
    textarea.style.textAlign = 'center'
    textarea.focus()
  }
  md_li[3].children[2].onclick = function(){
    textarea.style.textAlign = 'right'
    textarea.focus()
  }
  md_li[3].children[3].onclick = function(){
    textarea.style.textAlign = 'justify'
    textarea.focus()
  }
  md_li[4].children[0].onclick = function(){
    textarea.value = '   ' + textarea.value
  }
  </script>
</body>
</html>